<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC端</title>
    <meta name="keywords" content="PC商城">
    <meta name="description" content="这是一个PC端的项目">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- header start -->
    <header class="header">
        <!-- site-topbar start -->
        <div class="site-topbar">
            <div class="container clearfix">
                <nav class="topbar-nav">
                    <ul>
                        <li><a href="#">手机商城</a></li>
                        <li><a href="#">MINI</a></li>
                        <li><a href="#">IoT</a></li>
                        <li class="submenu active">
                            <a href="#">云服务</a>
                            <div class="submenu-list">
                                <ul>
                                    <li><a href="#">
                                        <img src="./images/shoujizhuti_08tongxunlu.png" alt="通讯录" width="16" height="16">
                                        通讯录</a></li>
                                    <li><a href="#">
                                        <img src="./images/shoujizhuti_05duanxin.png" alt="短信" width="16" height="16">
                                        短信</a></li>
                                    <li><a href="#">
                                        <img src="./images/shoujizhuti_03xiangce.png" alt="云相册" width="16" height="16">
                                        云相册</a></li>
                                    <li><a href="#">
                                        <img src="./images/shoujizhuti_25xiazai.png" alt="手机云盘" width="16" height="16">
                                        手机云盘</a></li>
                                    <li><a href="#">
                                        <img src="./images/shoujizhuti_15bianqian.png" alt="笔记（便签）" width="16" height="16">
                                        笔记（便签）</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">手机数科</a></li>
                        <li><a href="#">升品</a></li>
                        <li class="submenu"><a href="#">智能开发平台</a></li>
                        <li><a href="#">企业团购</a></li>
                        <li><a href="#">资质证照</a></li>
                        <li><a href="#">协议规则</a></li>
                        <li class="submenu active">
                            <a href="#">下载app</a>
                            <div class="appcode">
                                <img src="./images/shoujizhuti_03xiangce.png" alt="二维码" width="87" height="87">
                                手机商城APP
                            </div>
                        </li>
                        <li><a href="#">智能生活</a></li>
                        <li><a href="#">Melect Nocation</a></li>
                    </ul>
                </nav>
                <div class="topbar-car">
                    <a href="#" class="car-mini">
                        <em class="iconfont icon-gouwuche1"></em>
                        购物车
                        <span>(0)</span>
                    </a>
                    <div class="car-mneu">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </div>
                <div class="topbar-info">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>
        <!-- site-topbar end -->

        <!-- site-header start -->
        <div class="site-header">
            <div class="container clearfix">
                <div class="header-logo">
                    <a href="">
                        <img src="./images/logo.png" alt="logo" width="48" height="56">
                    </a>
                </div>
                <nav class="header-nav">
                    <ul>
                        <li><a href="#">Minini手机</a></li>
                        <li><a href="#">Pidmi手机</a></li>
                        <li><a href="#">电视</a></li>
                        <li><a href="#">笔记本</a></li>
                        <li><a href="#">平板</a></li>
                        <li><a href="#">家电</a></li>
                        <li><a href="#">路由器</a></li>
                        <li><a href="#">服务中心</a></li>
                        <li><a href="#">社区</a></li>
                    </ul>
                </nav>
                <div class="header-search">
                    <input type="text" class="search-text" placeholder="红米">
                    <a href="#" class="search-btn iconfont icon-fangdajing"></a>
                </div>
            </div>
        </div>
        <!-- site-header start -->
    </header>
    <!-- header end -->


    <!-- main start -->
    <main class="page">
        <!-- focus-slider start -->
        <section class="focus-slider container">
            <div class="category">
                <ul>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        手机</a>
                        <div class="category-list">111</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        电视</a>
                        <div class="category-list">222</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        笔记本 平板</a>
                        <div class="category-list">333</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        出行 穿戴</a>
                        <div class="category-list">444</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        耳机 音箱</a>
                        <div class="category-list">555</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        家电</a>
                        <div class="category-list">666</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        智能 路由器</a>
                        <div class="category-list">777</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        电源 配件</a>
                        <div class="category-list">888</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        健康 儿童</a>
                        <div class="category-list">999</div>
                    </li>
                    <li>
                        <a href="#">
                        <em class="iconfont icon-jiantouyou"></em>
                        生活 箱包</a>
                        <div class="category-list">000</div>
                    </li>
                </ul>
            </div>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <img src="./images/banner-3.png" width="1226" height="460" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/banner-3.png" width="1226" height="440" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/banner-3.png" width="1226" height="460" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/banner-3.png" width="1226" height="440" />
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </section>
        <!-- focus-slider end -->

        <!-- recommend start  -->
        <section class="recommend">
            <div class="index-banner">
                <a href="#"><img src="./images/banner-3.png" alt="" width="1226" height="120"></a>
            </div>
            <div class="music-con container">
                <h2 class="m-title">歌 单 推 荐</h2>
                <div class="m-tab">
                    <a href="#" class="active">为你推荐</a>
                    <a href="#">官方歌单</a>
                    <a href="#">情歌</a>
                    <a href="#">网络歌曲</a>
                    <a href="#">经典KTV</a>
                    <a href="#">热歌</a>
                </div>
                <div class="music-item clearfix">
                    <ul class="music-list current">
                        <li>
                            <a href="#"><img src="./images/music-1.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">百听不厌！300首古风党必听良曲</a></p>
                            <span>播放量：<em>1253.9</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-2.png" alt="" width="224" height="224">                                <i class="img-mask"></i>
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">拒绝不开心丨rap情歌甜到你发晕</a></p>
                            <span>播放量：<em>1.1</em>亿</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-3.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">鬼畜打败恐惧｜整点阳间的东西</a></p>
                            <span>播放量：<em>146.1</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-4.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">李信｜这里是为我所统帅的战场！</a></p>
                            <span>播放量：<em>1821.6</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-5.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">千禧盛世 • 重启旧时光</a></p>
                            <span>播放量：<em>2.1</em>亿</span>
                        </li>
                    </ul>
                    <ul class="music-list">
                        <li>
                            <a href="#"><img src="./images/music-6.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">百听不厌！300首古风党必听良曲</a></p>
                            <span>播放量：<em>1253.9</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-7.png" alt="" width="224" height="224">                                <i class="img-mask"></i>
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">拒绝不开心丨rap情歌甜到你发晕</a></p>
                            <span>播放量：<em>1.1</em>亿</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-8.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">鬼畜打败恐惧｜整点阳间的东西</a></p>
                            <span>播放量：<em>146.1</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-9.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">李信｜这里是为我所统帅的战场！</a></p>
                            <span>播放量：<em>1821.6</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-10.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">千禧盛世 • 重启旧时光</a></p>
                            <span>播放量：<em>2.1</em>亿</span>
                        </li>
                    </ul>
                    <ul class="music-list">
                        <li>
                            <a href="#"><img src="./images/music-1.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">百听不厌！300首古风党必听良曲</a></p>
                            <span>播放量：<em>1253.9</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-2.png" alt="" width="224" height="224">                                <i class="img-mask"></i>
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">拒绝不开心丨rap情歌甜到你发晕</a></p>
                            <span>播放量：<em>1.1</em>亿</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-3.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">鬼畜打败恐惧｜整点阳间的东西</a></p>
                            <span>播放量：<em>146.1</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-4.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">李信｜这里是为我所统帅的战场！</a></p>
                            <span>播放量：<em>1821.6</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-5.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">千禧盛世 • 重启旧时光</a></p>
                            <span>播放量：<em>2.1</em>亿</span>
                        </li>
                    </ul>
                    <ul class="music-list">
                        <li>
                            <a href="#"><img src="./images/music-6.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">百听不厌！300首古风党必听良曲</a></p>
                            <span>播放量：<em>1253.9</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-7.png" alt="" width="224" height="224">                                <i class="img-mask"></i>
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">拒绝不开心丨rap情歌甜到你发晕</a></p>
                            <span>播放量：<em>1.1</em>亿</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-8.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">鬼畜打败恐惧｜整点阳间的东西</a></p>
                            <span>播放量：<em>146.1</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-9.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">李信｜这里是为我所统帅的战场！</a></p>
                            <span>播放量：<em>1821.6</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-10.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">千禧盛世 • 重启旧时光</a></p>
                            <span>播放量：<em>2.1</em>亿</span>
                        </li>
                    </ul>
                    <ul class="music-list">
                        <li>
                            <a href="#"><img src="./images/music-1.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">百听不厌！300首古风党必听良曲</a></p>
                            <span>播放量：<em>1253.9</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-2.png" alt="" width="224" height="224">                                <i class="img-mask"></i>
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">拒绝不开心丨rap情歌甜到你发晕</a></p>
                            <span>播放量：<em>1.1</em>亿</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-3.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">鬼畜打败恐惧｜整点阳间的东西</a></p>
                            <span>播放量：<em>146.1</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-4.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">李信｜这里是为我所统帅的战场！</a></p>
                            <span>播放量：<em>1821.6</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-5.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">千禧盛世 • 重启旧时光</a></p>
                            <span>播放量：<em>2.1</em>亿</span>
                        </li>
                    </ul>
                    <ul class="music-list">
                        <li>
                            <a href="#"><img src="./images/music-6.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">百听不厌！300首古风党必听良曲</a></p>
                            <span>播放量：<em>1253.9</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-7.png" alt="" width="224" height="224">                                <i class="img-mask"></i>
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">拒绝不开心丨rap情歌甜到你发晕</a></p>
                            <span>播放量：<em>1.1</em>亿</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-8.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i>
                            </a>
                            <p class="music-list-title"><a href="">鬼畜打败恐惧｜整点阳间的东西</a></p>
                            <span>播放量：<em>146.1</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-9.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">李信｜这里是为我所统帅的战场！</a></p>
                            <span>播放量：<em>1821.6</em>万</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/music-10.png" alt="" width="224" height="224">
                                <i class="img-mask"></i>
                                <i class="img-play"></i></a>
                            <p class="music-list-title"><a href="">千禧盛世 • 重启旧时光</a></p>
                            <span>播放量：<em>2.1</em>亿</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- recommend end  -->

        <!-- playground start -->
        <section class="playground container">
            <div class="playground-header clearfix">
                <div class="header-title">
                    <h2>自在游乐 健康成长</h2>
                    <p>大人过大年，小朋友也有小乐趣。改造房间，给小朋友准备一个“游乐场”，无论是准备带着小朋友回家，还是就地过年，都可以享受 闲适的</p>
                </div>
                <div class="more-products">
                    <a href="">更多儿童产品</a>
                </div>
            </div>
            <div class="playground-con clearfix">
                <div class="con-l">
                    <a href="javascript:;" class="dot dot-1">
                        <div class="dot-tips">
                            <h3>DUNDRA 敦德拉</h3>
                            <p>带储物空间的活动桌</p>
                            <span><i>￥</i>999<i>.00</i></span>
                        </div>
                    </a>
                    <a href="javascript:;" class="dot dot-2">
                        <div class="dot-tips">
                            <h3>DUNDRA 敦德拉</h3>
                            <p>带储物空间的活动桌</p>
                            <span><i>￥</i>999<i>.00</i></span>
                        </div>
                    </a>
                    <a href="javascript:;" class="dot dot-3">
                        <div class="dot-tips">
                            <h3>DUNDRA 敦德拉</h3>
                            <p>带储物空间的活动桌</p>
                            <span><i>￥</i>999<i>.00</i></span>
                        </div>
                    </a>
                </div>
                <div class="con-m">
                    <div class="con-m-1">
                        <a href="javascript:;" class="dot dot-4">
                            <div class="dot-tips">
                                <h3>DUNDRA 敦德拉</h3>
                                <p>带储物空间的活动桌</p>
                                <span><i>￥</i>999<i>.00</i></span>
                            </div>
                        </a>
                    </div>
                    <div class="con-m-2">
                        <a href="javascript:;" class="dot dot-5">
                            <div class="dot-tips">
                                <h3>DUNDRA 敦德拉</h3>
                                <p>带储物空间的活动桌</p>
                                <span><i>￥</i>999<i>.00</i></span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="con-r">
                    <div class="con-r-1"></div>
                    <div class="con-r-2"></div>
                </div>
            </div>
        </section>
        <!-- playground end -->

        <!-- videos start -->
        <section class="videos clearfix">
            <div class="container">
                <h2>手机商城 - 精彩视频</h2>
                <ul>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-1.png" alt="" width="302" height="190">
                            <p>巨族 18X</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-2.png" alt="" width="302" height="190">
                            <p>巨族 18 Pro</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-3.png" alt="" width="302" height="190">
                            <p>巨族 18</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-4.png" alt="" width="302" height="190">
                            <p>Lipro 智能家居</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-5.png" alt="" width="302" height="190">
                            <p>Plyme 9 功能视频</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-6.png" alt="" width="302" height="190">
                            <p>Plyme 8 概念视频</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-7.png" alt="" width="302" height="190">
                            <p>Aicy</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                    <li data-video-url="./video/1.mp4">
                        <a href="javascript:;">
                            <img src="./images/video-8.png" alt="" width="302" height="190">
                            <p>安全家庭</p>
                            <span class="video-play"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- videos start -->

        <!-- mall start -->
        <section class="mall">
            <div class="container clearfix">
                <h2>手机商城 - 推荐信息</h2>
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/mall-1.png" alt="">
                            <div class="mall-info">
                                <span>产品</span>
                                <p class="mall-title">MINI nova 9 Pro</p>
                                <span>精彩 由我摄定</span>
                                <p class="mall-more">
                                    <span>了解更多</span>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                </p>
                            </div>
                            <div class="mall-shadow"></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/mall-2.png" alt="">
                            <div class="mall-info">
                                <span>产品</span>
                                <p class="mall-title">MINI WATCH GT 3</p>
                                <span>健康时刻 一表在握</span>
                                <p class="mall-more">
                                    <span>了解更多</span>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                </p>
                            </div>
                            <div class="mall-shadow"></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/mall-3.png" alt="">
                            <div class="mall-info">
                                <span>产品</span>
                                <p class="mall-title">MINI MateStation X</p>
                                <span>原色全面屏一体机</span>
                                <p class="mall-more">
                                    <span>了解更多</span>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                </p>
                            </div>
                            <div class="mall-shadow"></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/mall-4.png" alt="">
                            <div class="mall-info">
                                <span>前沿探索</span>
                                <p class="mall-title">憧憬6G，共同定义6G</p>
                                <span>《6G无线通信新征程》序言</span>
                                <p class="mall-more">
                                    <span>了解更多</span>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                </p>
                            </div>
                            <div class="mall-shadow"></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/mall-5.png" alt="">
                            <div class="mall-info">
                                <span>产品</span>
                                <p class="mall-title">MiniBook E</p>
                                <span>二合一笔记本，高效移动办公</span>
                                <p class="mall-more">
                                    <span>了解更多</span>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                </p>
                            </div>
                            <div class="mall-shadow"></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/mall-6.png" alt="">
                            <div class="mall-info">
                                <span>成功故事</span>
                                <p class="mall-title">以“青海湖”之名，再造青海</p>
                                <span>看全球最大可再生能源基地如何给出答案</span>
                                <p class="mall-more">
                                    <span>了解更多</span>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                </p>
                            </div>
                            <div class="mall-shadow"></div>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- mall end -->

        <!-- accordion start -->
        <section class="accordion">
            <div class="container">
                <h2><img src="./images/logo-3.png" alt="" width="130" height="44"></h2>
                <ul>
                    <li class="active">
                        <a href="#">
                            <img src="./images/a-1.png" alt="" width="361" height="270">
                            <h3>开发素材</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/a-2.png" alt="" width="361" height="270">
                            <h3>开发素材</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/a-3.png" alt="" width="361" height="270">
                            <h3>开发素材</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/a-4.png" alt="" width="361" height="270">
                            <h3>开发素材</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/a-5.png" alt="" width="361" height="270">
                            <h3>开发素材</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/a-6.png" alt="" width="361" height="270">
                            <h3>开发素材</h3>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- accordion end -->

    </main>
    <!-- main end -->

    <!-- site-footer start -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-service clearfix">
                <ul>
                    <li><i class="iconfont icon-banshou"></i><a href="#">预约维修服务</a></li>
                    <li><i class="iconfont icon-7tianwuliyoutuihuo"></i><a href="#">7天无理由退货</a></li>
                    <li><i class="iconfont icon-15tianwuliyoutuihuo"></i><a href="#">15天免费换货</a></li>
                    <li><i class="iconfont icon-liwu"></i><a href="#">满69元包邮</a></li>
                    <li><i class="iconfont icon-31dingwei"></i><a href="#">1100余家售后网点</a></li>
                </ul>
            </div>
            <div class="footer-links clearfix">
                <dl>
                    <dt>选购指南</dt>
                    <dd><a href="#">手机</a></dd>
                    <dd><a href="#">电脑</a></dd>
                    <dd><a href="#">笔记本</a></dd>
                </dl>
                <dl>
                    <dt>服务中心</dt>
                    <dd><a href="#">申请售后</a></dd>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">维修服务价格</a></dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd><a href="#">Mini之家</a></dd>
                    <dd><a href="#">服务网点</a></dd>
                    <dd><a href="#">授权体验店/专区</a></dd>
                </dl>
                <dl>
                    <dt>关于迷你</dt>
                    <dd><a href="#">了解mini</a></dd>
                    <dd><a href="#">加入mini</a></dd>
                    <dd><a href="#">投资者关系</a></dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd><a href="#">新浪微博</a></dd>
                    <dd><a href="#">官方微信</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <div class="telephone">
                    <p class="phone">400-123-4567</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#"><em class="iconfont icon-duanxin"></em>人工客服</a>
                </div>
            </div>
            <div class="copyright">ICODINGEDU | Copyright © 2019-present Arry | 陕 ICP 备 2022004903</div>
        </div>
    </footer>
    <!-- site-footer end -->


    <!-- v-mask start -->
    <div class="v-mask">
        <div class="mask-video">
            <video controls src="./video/1.mp4" class="video" width="1000"></video>
            <span class="mask-close">X</span>
        </div>
    </div>
    <!-- v-mask end -->



    <!-- swiper官方类库 -->
    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        // swiper 轮播图
        var swiper = new Swiper(".mySwiper", {
          loop: true, // 循环模式选项
          autoplay:true,
          spaceBetween: 30,
          effect: "fade",
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });

        
        //选项卡切换
        (function(){
            //获取所有的选项卡
            var tablist = document.querySelectorAll(".m-tab a");
            //获取所有的音乐列表
            var item = document.querySelectorAll(".music-item .music-list");
            // console.log(tablist,item)
            for(var i=0; i < item.length; i++){
                tablist[i].index = i;
                //当鼠标滑动到tablist
                tablist[i].onmouseover = function(){
                for(var j=0; j < item.length; j++){
                    tablist[j].className = "";
                    item[j].style.display = "none"; 
                }
                //tablist选中
                this.className = "active";
                //显示music-list
                item[this.index].style.display ="block";
                }
            }
        })();


        //视频弹窗
        (function(){
            //获取一组视频url地址li元素
            var vli = document.querySelectorAll(".videos ul li");
            //获取video对象
            var videoObj = document.getElementsByClassName("video")
            //获取弹窗
            var mask = document.getElementsByClassName("v-mask");
            //获取关闭按钮对象
            var closeBtn = document.getElementsByClassName("mask-close")
            // console.log(vli);
            for(var i=0;i<vli.length;i++){
                vli[i].onclick = function(){
                    var value = this.getAttribute("data-video-url");
                    // console.log(value);
                    videoObj[0].setAttribute("src",value);
                    mask[0].style.display="block";
                    videoObj[0].play();
                };
            }

            //点击关闭按钮
            closeBtn[0].onclick = function(){
                mask[0].style.display="none";
                videoObj[0].pause();
            }

        })();



        //手风琴
        (function(){
            var liObj = document.querySelectorAll(".accordion ul li");
            // console.log(liObj);
            for(var i=0;i<liObj.length;i++){
                liObj[i].onmouseover = function(){
                    for(var j=0;j<liObj.length;j++){
                        liObj[j].classList.remove("active");
                    }
                    this.classList.add("active");
                }
            }
        })();


    </script>
</body>
</html>